<template>
  <!-- 媒体报道详情页 -->
  <div class="mtDetail">
    <Header />
    <!-- table表格 点击阅读详情页 -->
    <div class="detail-container flex">
      <div class="content-wrap scroll_box2">
        <!--  -->
        <div :class="topWrapFun(detailData.transTitle)">
          <!-- 模式1的头部 -->
          <div class="title title_box" v-show="!showTF && detailData.transTitle">
            <div class="img_maxbox">
              <div class="title_icon">
                <img src="@/assets/common/u47.png" alt="" />
              </div>
              <div class="title_text">
                {{ detailData.transTitle }}
                <p v-show="showTFFun()" style="color: #666">
                  原文：{{ detailData.title }}
                </p>
              </div>
            </div>
            <el-button size="mini" class="backBtn" @click="goBack()">返回</el-button>
          </div>
          <div class="subTitle" v-show="!showTF">
            <span>{{ detailData.postTime }}</span>
            <span class="line_icon">|</span
            ><span class="come">来源：{{ detailData.sourceUrl }}</span>
          </div>
          <el-button
            v-show="!showTF && !detailData.transTitle"
            size="mini"
            class="backBtn"
            @click="goBack()"
            >返回</el-button
          >
          <!-- 模式2的头部 -->
          <div class="s_max" v-show="showTF">
            <div>
              <div class="source">
                <span>来源：{{ detailData.sourceUrl }}</span>
              </div>
              <div class="society">
                <!-- 时间 -->
                <span>时间：{{ detailData.postTime }}</span>
                <!-- 阅读数 -->
                <!-- <span>阅读：{{ detailData.forwordNum }}</span> -->
                <!-- 点赞数 -->
                <!-- <span>点赞：{{ detailData.likeNum }}</span> -->
                <!-- 评论数 -->
                <!-- <span>评论：{{ detailData.replyNum }}</span> -->
                <!-- <span class="back_icon" @click="goBack()">返回</span> -->
              </div>
            </div>
            <el-button size="mini" class="backBtn" @click="goBack()">返回</el-button>
          </div>
        </div>
        <!-- 线 -->
        <div class="line_box"></div>
        <div class="text_wrap scroll_box">
          <!-- <div class="text_wrap"> -->
          <div class="content">
            <!-- 图片 -->
            <div class="con_pic" v-if="detailData.imageUrl">
              <img
                :src="'data:image/jpeg;base64,' + detailData.imageUrl"
                alt=""
                srcset=""
              />
            </div>
            <!-- 译文 -->
            <div class="con_text" v-html="detailData.transArticleContent">
              <!-- {{ detailData.transArticleContent }} -->
            </div>
            <!-- 原文 -->
            <p v-show="showTFFun()">原文：</p>
            <div
              v-show="showTFFun()"
              class="con_text2"
              v-html="detailData.articleContent"
            >
              <!-- {{ detailData.articleContent }} -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  data() {
    return {
      detailData: {},
      showTF: false, //显示哪个头？
    };
  },
  components: {
    Header,
  },
  mounted() {
    // console.log(this.$route.params.id);
    // this.getDetailData(this.$route.params.id);
    this.whereGoFun(this.$route.params.id);
    if (localStorage.whereGo == "societyActivity") {
      this.showTF = true;
    } else {
      this.showTF = false;
    }
  },
  created() {
    // axios 前缀存储
    this.$api.axiosUrlset();
  },
  methods: {
    showTFFun() {
      // 不现实
      let showtf = true;
      if (sessionStorage.typeStr == "no") {
        showtf = false;
      }
      return showtf;
    },
    topWrapFun(title) {
      let c = ["top_wrap"];
      if (!title) {
        c.push("detail_box");
      }
      return c;
    },
    whereGoFun(id) {
      let go = localStorage.whereGo;
      switch (go) {
        case "index":
          // 首页来的
          // sessionStorage.activeName
          // console.log("这名字", sessionStorage.activeName);
          if (sessionStorage.activeName == "网站") {
            // getReportDetail
            this.getDetailData(id, sessionStorage.dataSource);
          } else {
            this.getTalkDetail(id);
          }
          break;
        case "societyActivity":
          // 媒体来的
          this.getTalkDetail(id);
          break;
        case "tendency":
          // 研究成果来的,动向情报
          this.getDetailData(id, sessionStorage.dataSource);
          break;
        default:
          break;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    // 首页的请求：
    getTalkDetail(id) {
      this.$api.getTalkDetail(id).then((res) => {
        // console.log("看这里", res);
        this.detailData = res;
      });
    },
    // 请求详情页数据
    getDetailData(id, source) {
      // console.log(id, "来来来");
      this.$api.getReportDetail(id, source).then((res) => {
        // console.log(res);
        this.detailData = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mtDetail {
  background: #eee;
  height: 100vh;
  .detail-container {
    justify-content: center;
    margin-top: 0.2rem;
    .content-wrap {
      margin-left: 0.2rem;
      width: 14.52rem;
      overflow-y: auto;
      background: #fff;
      .top_wrap {
        box-sizing: border-box;
        width: 100%;
        min-height: 100px;
        border-top: 2px solid #2d73ff;
        background: #fff;
        padding: 10px 30px;
        // margin-bottom: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        .title_box {
          box-sizing: border-box;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img_maxbox {
            box-sizing: border-box;
            display: flex;
            // flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
          }
        }
        .society {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .back_icon {
            box-sizing: border-box;
            display: inline-block;
            padding: 0 7px;
            border-radius: 5px;
            // font-weight: bold;
            border: 1px solid #cccccc;
            cursor: pointer;
          }
          > span {
            display: inline-block;
            padding: 0 10px;
          }
          > span + span {
            // border-left: 1px solid black;
          }
        }
        .s_max {
          box-sizing: border-box;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          > div {
            display: flex;
            justify-content: flex-start;
            align-content: flex-start;
            flex-wrap: wrap;
          }
        }
        .source {
          > span {
            display: inline-block;
            padding: 0 10px;
          }
        }
        //
        .title {
          .title_icon {
            width: 20px;
            height: 20px;
            float: left;
            img {
              margin-top: 4px;
              width: 100%;
            }
          }
          .title_text {
            font-weight: 600;
            font-size: 14px;
            margin-left: 10px;
            float: left;
            line-height: 22px;
            > p {
              margin-top: 4px;
            }
          }
          .backBtn {
            float: right;
          }
        }
        .subTitle {
          // position: relative;
          // right: 237px;
          // top: 50px;
          margin-top: 8px;
          margin-left: 30px;
          color: #999;
          font-size: 12px;
          .line_icon {
            margin: 0 20px;
          }
          .come {
            // box-sizing: border-box;
            // display: inline-block;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
          }
        }
      }
      .detail_box {
        min-height: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .subTitle {
          margin-top: 0px;
          margin-left: 0px;
        }
      }
      .text_wrap {
        width: 100%;
        // height: 500px;
        background: #fff;
        padding: 30px 30px;
        // overflow-y: auto;
        .content {
          width: 100%;
          max-height: 68vh;
          .con_pic {
            width: 400px;
            height: 300px;
            margin: 0 auto;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p {
            font-weight: 600;
            margin-top: 60px;
            padding-left: 43px;
            font-size: 20px;
          }
          .con_text {
            width: 90%;
            padding-top: 20px;
            margin: 0 auto;
            text-indent: 30px;
            line-height: 40px;
            img {
              display: none;
            }
          }
          .con_text2 {
            width: 90%;
            margin: 0 auto;
            text-indent: 30px;
            line-height: 40px;
            img {
              display: none;
            }
          }
        }
      }
    }
    .line_box {
      box-sizing: border-box;
      width: 100%;
      height: 16px;
      background: #eeeeee;
    }
  }
}
</style>
